﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浩辰webcad批注审图版V3</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .toolbar {
      height: 60px;
    }

    #webcad {
      width: 100%;
      height: calc(100% - 60px);
    }

    #modal,
    #modalstamp {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 200;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #modal section,
    #modalstamp section {
      width: 500px;
      height: 300px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .GStarSDK-texture-image.stamp {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>

  <div id="webcad"></div>

  <div id="modal">
    <section>
      <textarea id="input" rows="3" cols="30"></textarea>
      <button id="ok">确定</button>
    </section>
  </div>

  <div id="modalstamp">
    <section>
      <p>这块是上层自定义的逻辑</p>
      <input id="inputstamp" type="text" />
      <button id="stampok">确定</button>
    </section>
  </div>
  <script src="./js/GStarSDK.js"></script>

  <script>
    //先判断是否是IE浏览器，IE10及以下的IE浏览器不支持，直接弹出提示告知
    function isnocad(){
      var browser = getBrowerInfo()
      var ieversion = getIeVersion();
      if (browser == 'IE') {
        if (ieversion != '11.0') {
          alert('不支持IE10及以下的浏览器，请使用其他浏览器打开重试！')
        }
      }
    }

    window.onload = function() {
            isnocad();
        }



    // 初始化SDK
    var gstarSDK = new GStarSDK({
      wrapId: 'webcad',  //容器ID
      switchLayoutCB: switchLayout, // 点击布局功能会触发此回调
      apiHost: window.location.host,  //API域名，转换PDF、另存功能需要向该域名发送请求，如果没有用的转PDF、版本转换功能，则无须关注这个参数。

      tipsTime: 3000, //错误提示信息存在时间(毫秒)，默认3000（3秒）
      mobileSizeLimit: 15 * 1024 * 1024, //移动端可打开ocf文件的最大限制（字节数），默认5242880(5M)
      pcSizeLimit: 30 * 1024 * 1024,  //PC端可打开ocf文件最大限制（字节数），默认12582912(12M)
      sizeLimitCB: sizeLimit, //当ocf文件超过设置的最大值后，执行该回调函数
      language: 'zh', //语言设置，可选'zh'（简中）/'en'(英语)/'ko'(韩语),默认'zh'
      measureAccuracy: 3,  //测量数值的精度位数
      mode: 'default', //填充显示模式，"default":默认值，粗文字不填充，其他填充图案正常填充；"line":所有元素都不填充；"fill":所有需要填充元素都填充
      notesChangeCB: notesChange, //增加、删除、修改批注后的操作函数
      isHideMarks: true, //是否隐藏软件自带的书签功能
      hideToolbar: false, // 是否隐藏左侧工具栏
      notesSelectCB: notesSelect, //批注点击回调事件，无返回或返回为假值则不进入批注的编辑模式，如果返回为真值则正常进入选中编辑批注模式
    })

    function notesSelect(noteData) {
      //如果需要对批注编辑功能进行权限控制，这里写入自己的权限判断逻辑，返回假则用户无法编辑批注，返回真可以正常编辑批注。
      console.log('noteData', noteData)
      //return false
      return true
    }



    // 审图批注演示
    var _DOM_Modal = document.getElementById('modal')
    _DOM_Modal.setAttribute('style', 'display:none')
    var _DOM_Input = document.getElementById('input')
    var _DOM_OK = document.getElementById('ok')
    _DOM_OK.onclick = function () {
      var text = _DOM_Input.value
      gstarSDK.notes.noteCheckView.setText(text)
      _DOM_Modal.setAttribute('style', 'display:none')
      _DOM_Input.value = ''
    }
    // 审图批注需要输入文字回调
    gstarSDK.notes.noteCheckView.inputTextCB = function (text) {
      _DOM_Modal.setAttribute('style', '')
      // 如果是编辑文字
      if (text) {
        _DOM_Input.value = text
      }
    }
    // 审图批注返回截图回调
    gstarSDK.notes.noteCheckView.screenshotCB = function (imgBase64) {
      console.log(imgBase64)
    }


    // 自定义图章定义,图章图片支持base64和url。
    gstarSDK.notes.noteStamp.maps = {
      home: '',
      dog: '',
      cat: '',
      music: 'https://static.easyicon.net/preview/131/1311243.gif'
    }
    // 自定义图章编辑界面显示的内容，可以将自己的业务逻辑需要显示的内容添加到这里
    var _DOM_Modal_Stamp = document.getElementById('modalstamp')
    _DOM_Modal_Stamp.setAttribute('style', 'display:none')
    var _DOM_Input_Stamp = document.getElementById('inputstamp')
    var _DOM_OK_Stamp = document.getElementById('stampok')
    gstarSDK.notes.noteStamp.detailCB = function (currentData) {
      // 显示弹框，返回当前图章的自定义数据
      _DOM_Modal_Stamp.setAttribute('style', '')
      if (currentData.textstamp) {
        _DOM_Input_Stamp.value = currentData.textstamp
      }
    }
    _DOM_OK_Stamp.onclick = function () {
      var textstamp = _DOM_Input_Stamp.value
      gstarSDK.notes.noteStamp.setData({ textstamp })
      _DOM_Modal_Stamp.setAttribute('style', 'display:none')
      _DOM_Input_Stamp.value = ''
    }


    gstarSDK.enableZoom(5)  // 开启鼠标缩放功能,数字是缩放的速度
    gstarSDK.enablePan(1)    // 开启鼠标平移功能

    //gstarSDK.measures.enableWordNote = true  //开启保留测量结果功能



    //增加、删除、修改批注后的操作函数
    function notesChange(notetype, noteinfo) {
      alert("批注操作是：" + JSON.stringify(notetype));
      alert("批注内容是：" + JSON.stringify(noteinfo));
      console.log("批注内容是：");
      console.log(JSON.stringify(noteinfo));
    }

    // 当ocf文件超过设置的最大值后，执行这个函数，里面逻辑可以自己定义
    function sizeLimit(ocfSize, limitSize) {
      alert('图纸太大，超过了系统设置的最大值')
      //alert('图纸太大，当前图纸大小:' + parseInt(ocfSize / 1048576) + 'M,大于系统限制的：' + parseInt(limitSize / 1048576)+'M')
    }

    //测试用的ocf样例文件
    var demoocfurl = {
      '*MODEL_SPACE': 'https://resource-cn.gstarcad.com/sampledraw/0000012863.ocf',
      '*PAPER_SPACE': 'https://resource-cn.gstarcad.com/sampledraw/0000012863.257.ocf',
    }

    var fileId = 1234 //当前图纸的唯一标识

    // 初始化渲染默认ocf文件
    //var defaultocfurl = 'http://127.0.0.1/file/ocf/1001/test1.ocf'  //默认显示的ocf文件url地址
   // var defaultocfurl = demoocfurl['*MODEL_SPACE']
      var defaultocfurl = "http://mk.longder.com/202210172007.ocf" ;//默认显示的ocf文件url地址http://mk.longder.com/202210160817.ocf  http://led.longder.com/test.ocf
    // 初始化渲染默认ocf文件
/*    getDrawSheet(defaultocfurl, function (arraybuffer) {
      gstarSDK.render('ocf', arraybuffer, fileId, true);

    })
    */

    getDrawSheet(defaultocfurl, function (arraybuffer) {
   gstarSDK.render('ocf', arraybuffer, fileId, true).then(() => {
	   debugger;
      console.log('渲染完成');
      let spanceName=gstarSDK.layoutInfo.m_Handle;
      debugger;
      //biaozhu();
   })

})

    // 切换布局回调方法
    function switchLayout(obj) {
      //alert(obj.globalName) //布局名称
      //var makeocfurl = 'http://127.0.0.1/transform.do?fileId=' + fileId + '&layout=' + obj.globalName //根据布局globalName获取相应布局名称，由于布局图形必须有对应的布局名称，后台才能转换生成，需要将布局名传给后台，然后后台返回转换后的ocf地址
      //var layoutocfurl = getLayoutOcfUrl(makeocfurl)

      var layoutocfurl = demoocfurl[String(obj.globalName)] //样例布局ocf文件
      getDrawSheet(layoutocfurl, function (arraybuffer) {
        gstarSDK.render('ocf', arraybuffer, fileId, true)
      })
    }

    // 下载图纸数据
    function getDrawSheet(url, cb) {
      var req
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest()
      } else {
        req = new ActiveXObject('Microsoft.XMLHTTP')
      }
      gstarSDK.Tips.showProgress(0, '下载中...')
      req.onload = function () {
        if ((req.status >= 200 && req.status < 300) || req.status === 304) {
          cb(req.response)
        }
        if (req.status === 404) {
		  gstarSDK.Tips.showProgress(0, url+' 此ocf文件下载失败')
        }
      }
      req.open('GET', url, true)
      req.responseType = 'arraybuffer'
      req.send(null);


    }

    // 获取布局图纸转换请求链接返回的ocf地址
    function getLayoutOcfUrl(url) {
      var req
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest()
      } else {
        req = new ActiveXObject('Microsoft.XMLHTTP')
      }
      req.open('GET', url, false)
      req.send(null)

      req.onreadystatechange = function () {
        if (req.status == 200 && req.readyState == 4) {
          alert(req.responseText)
        }
      }
      return req.responseText
    }

    //获取浏览器信息
    function getBrowerInfo() {
      var userAgent = window.navigator.userAgent.toLowerCase()
      var browserType = ''
      // 浏览器类型IE
      if (userAgent.match(/msie/) != null || userAgent.match(/trident/) != null) {
        browserType = 'IE'
      }
      return browserType
    }

    //获取IE浏览器版本
    function getIeVersion() {
      var IEMode = document.documentMode
      var rMsie = /(msie\s|trident.*rv:)([\w.]+)/;
      var ma = window.navigator.userAgent.toLowerCase()
      var match = rMsie.exec(ma);
      try {
        return match[2];
      } catch (e) {
        return IEMode;
      }
    }

  </script>
</body>

</html>
